<!-- <template>
  <div>行车管理-缴费管理</div>
</template> -->
<template>
  <div class="carpay-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">车牌号码：</div>
      <el-input v-model="params.carNumber" placeholder="请输入内容" class="search-main" @clear="getlist"/>
      <div class="search-label">缴纳状态：</div>
      <el-select v-model="params.paymentStatus">
      <el-option label="未缴纳" :value="0" />
        <el-option label="已缴纳" :value="1" />
        <el-option label="全部" :value="null" />
      </el-select>
      <el-button type="primary"  @click="getlist">查询</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width: 100%"
        :data="list"
      >
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          prop="carNumber"
          label="车牌号码"
        />
        <el-table-column
          prop="chargeType"
          label="收费类型"
        > <template #default="scope">
         {{ formatType(scope.row.chargeType) }}
        </template>
        </el-table-column>
        <el-table-column
          prop="parkingTime"
          label="停车总时长"
        />
        <el-table-column
          prop="actualCharge"
          label="缴纳费用（元）"
        />
        <el-table-column
          prop="paymentStatus"
          label="缴纳状态"
        >
        <template #default="scope">
         {{ formatStatus(scope.row.paymentStatus) }}
        </template>
        </el-table-column>
        <el-table-column
          prop="paymentMethod"
          label="缴纳方式"
        ><template #default="scope">
         {{ formatMethod(scope.row.paymentMethod) }}
        </template>
        </el-table-column> 

        <el-table-column
          prop="paymentTime"
          label="	缴纳时间"
        />
      </el-table>
      <div class="page-container">
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"  
      :total="total"
      :current-page="params.page"
      :page-size="params.pageSize"
      :page-sizes="[1,2,3,4,5,6,7,8,9,10]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    
</div>
    </div>
    
  </div>
</template>

<script>
import { getCarpayListAPI} from '@/api/carpay'
export default {
  data() {
    return {
      flag:true,
      list: [], 
      total:0,
      params: {  
        page: 1,
        pageSize: 10,
        carNumber:null,
        paymentStatus:null
      }
    }
  },
mounted(){
this.getlist();
},

methods:{
  formatStatus(paymentStatus) {
  const statusMap = {
    0: '未缴纳',
    1: '已缴纳'
  }
  return statusMap[paymentStatus]
},
formatMethod(paymentMethod){
  const methodMap = {
    'Alipay': '支付宝',
    'WeChat': '微信',
    'Cash':'现金支付'
  }
  return methodMap[paymentMethod]
},
formatType(chargeType){
  const TypeMap = {
    'temp': '临时停车',
    'card': '月卡',
    
  }
  return TypeMap[chargeType]
},
  handleSizeChange(pageSize) {
      this.params.page = 1
  this.params.pageSize = pageSize
  this.getlist()
},
handleCurrentChange(page){
  this.params.page = page
  this.getlist()
  
}, 
  async getlist(){ 
  const res = await getCarpayListAPI(this.params)
  this.list = res.data.rows
  this.total = res.data.total
  console.log(res.data.rows)
}

      
}
}
</script>

<style lang="scss" scoped>
.department-container{
  padding:10px;
}
.search-container{
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237,237,237,.9);;
  padding-bottom: 20px;
  .search-label{
    width:100px;
  }
  .search-main{
    width: 220px;
    margin-right: 10px;
  }
}
</style>